<template>
  <div class="goodsdetail-container">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 提示 -->
    <Tips></Tips>
    <!-- 商品详情 -->
    <div class="info">
      <h3 class="name">{{ info.name }}</h3>
      <div class="goods_brief">{{ info.goods_brief }}</div>
      <p class="retail_price">{{ info.retail_price | RMBFormat }}</p>
    </div>
    <!-- 展示弹出层 -->
    <van-cell title="展示弹出层" is-link @click="isSkuShow = true" />
    <!-- 商品参数 -->
    <div class="attribute">
      <h3>商品参数</h3>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <div class="left">{{ item.name }}</div>
          <div class="right van-ellipsis">{{ item.value }}</div>
        </li>
      </ul>
    </div>
    <!-- 商品图片信息 -->
    <div class="goods_desc" v-html="goods_desc"></div>
    <!-- 常见问题 -->
    <div class="problem">
      <div class="header">
        <van-icon name="minus" size="25px" color="#ccc" />
        <h4>常见问题</h4>
        <van-icon name="minus" size="25px" color="#ccc" />
      </div>
      <!-- 内容 -->
      <div class="content">
        <ul>
          <li v-for="item in issue" :key="item.id">
            <div class="up">{{ item.question }}</div>
            <div class="down">{{ item.answer }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 都在看 -->
    <div class="watching">
      <div class="header">
        <van-icon name="minus" size="25px" color="#ccc" />
        <h4>大家都在看</h4>
        <van-icon name="minus" size="25px" color="#ccc" />
      </div>
      <!-- 相关商品列表 -->
      <div class="goods">
        <Produst :goodsList="goodsList"></Produst>
      </div>
    </div>
    <!-- 商品规格 -->
    <van-sku
      v-model="isSkuShow"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      ref="sku"
    />
    <!-- 商品导航栏 -->
    <APPGoodsActive
      @addToCart="addToCart"
      :cartCount="cartCount"
    ></APPGoodsActive>
  </div>
</template>

<script>
// 引入goodsDetailAPI
import { goodsDetailAPI } from '@/api/goodsDetailAPI.js'
// 引入Tips组件
import Tips from '@/components/Tips.vue'
// 引入Produst组件
import Produst from '@/components/Produst.vue'
// 引入APPGodsActive组件
import APPGoodsActive from '@/components/APPGoodsActive.vue'
// 导入RelatedproductsAPI接口
import { RelatedproductsAPI } from '@/api/RelatedproductsAPI.js'
// 导入getCartCountAPI接口
import { getCartCountAPI } from '@/api/getCartCountAPI.js'
// 导入addCartAPI接口
import { addCartAPI } from '@/api/addCartAPI.js'
export default {
  name: 'goodsDetail',
  components: {
    Tips,
    Produst,
    APPGoodsActive
  },
  data() {
    return {
      // 轮播图数据
      gallery: [],
      // 商品详情信息
      info: {},
      // 商品参数
      attribute: [],
      // 商品图片信息
      goods_desc: '',
      // 获取常见问题
      issue: [],
      // 商品id
      goodsId: '',
      // 相关商品列表
      goodsList: [],
      // 控制商品规格弹窗显示隐藏
      isSkuShow: false,
      // 商品的sku数据
      sku: {
        // 是否显示库存，false为显示
        hide_stock: false,
        // 商品的默认价格
        price: '',
        // 商品的总库存
        stock_num: 0,
        tree: []
      },
      // 商品的信息
      goods: {
        // 商品图片的url路径
        picture: 'https://img01.yzcdn.cn/1.jpg'
      },
      // productList数组第一个元素的id
      productListId: '',
      // 购物车商品数量
      cartCount: 0
    }
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await RelatedproductsAPI(this.goodsId)
      // console.log(res)
      if (res.errno !== 0) {
        return this.$toast.fail('获取相关商品失败')
      }
      this.goodsList = res.data.goodsList
    },
    // 获取购物车的商品数量
    async getCartCount() {
      const { data: res } = await getCartCountAPI()
      if (res.errno !== 0) {
        return this.$toast.fail('获取购物车商品数量失败')
      }
      this.cartCount = res.data.cartTotal.goodsCount
    },
    // 点击添加购物车
    async addToCart() {
      // console.log('添加到购物车')
      if (!this.isSkuShow) {
        this.isSkuShow = true
      } else {
        // console.log(this.$refs.sku.getSkuData().selectedNum)
        const { data: res } = await addCartAPI(
          this.$route.params.id,
          this.productListId,
          this.$refs.sku.getSkuData().selectedNum
        )
        console.log(res)
        if (res.errno !== 0) {
          return
        }
        // 将购物车总数量赋值给cartCount
        this.cartCount = res.data.cartTotal.goodsCount
        // 提示添加购物车成功
        this.$toast.success('添加购物车成功')
        // 1.5秒后跳转到购物车页面
        window.setTimeout(() => {
          this.$router.push('/cart')
        }, 1500)
      }
    }
  },
  async created() {
    const { data: res } = await goodsDetailAPI(this.$route.params.id)
    console.log(res)
    if (res.errno !== 0) {
      return this.$toast.fail('获取商品详情失败')
    }
    // 获取轮播图数据
    this.gallery = res.data.gallery
    // 获取商品详细信息
    this.info = res.data.info
    // 获取商品参数
    this.attribute = res.data.attribute
    // 获取图片信息
    this.goods_desc = res.data.info.goods_desc
    // 获取常见问题
    this.issue = res.data.issue
    // 获取商品id
    this.goodsId = res.data.info.id
    // 获取商品图片url路径
    this.goods.picture = res.data.info.list_pic_url
    // 获取商品的价格
    this.sku.price = res.data.info.retail_price
    // 获取商品的总库存
    this.sku.stock_num = res.data.info.goods_number
    // 获取productList数组第一个元素的id
    this.productListId = res.data.productList[0].id
    this.getGoodsList()
    this.getCartCount()
  }
}
</script>

<style lang="less" scoped>
.info {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  line-height: 72px;
  border-bottom: 1px solid #ccc;
  h3 {
    font-size: 38px;
  }
  .goods_brief {
    font-size: 28px;
  }
  p {
    color: darkred;
    font-size: 28px;
  }
}
.attribute {
  padding: 20px;
  background-color: #fff;
  h3 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 15px;
  }
  ul {
    li {
      display: flex;
      font-size: 18px;
      background-color: #efefef;
      height: 60px;
      line-height: 60px;
      margin-bottom: 10px;
      border-radius: 5px;
      .left {
        flex: 1;
        text-align: right;
        padding-right: 20px;
      }
      .right {
        flex: 2;
      }
    }
  }
}
/deep/.goods_desc {
  img {
    width: 100%;
    vertical-align: middle;
  }
}
.problem {
  margin-bottom: 20px;
  padding: 30px;
  background-color: #fff;
  .header {
    display: flex;
    height: 30px;
    margin-bottom: 30px;
    line-height: 30px;
    justify-content: center;
    align-items: center;
    h4 {
      margin: 0 20px;
      font-size: 32px;
      font-weight: 400;
    }
  }
  .content {
    ul {
      li {
        .up {
          font-size: 32px;
        }
        .down {
          margin: 10px 0;
          color: #bbb;
          font-size: 16px;
        }
      }
    }
  }
}
.watching {
  padding: 30px;
  background-color: #fff;
  .header {
    display: flex;
    height: 30px;
    margin-bottom: 30px;
    line-height: 30px;
    justify-content: center;
    align-items: center;
    h4 {
      margin: 0 20px;
      font-size: 32px;
      font-weight: 400;
    }
  }
}
</style>
